<template>
	<div class="good_container">
		<div class="good_header">
			<el-input placeholder="请输入商品" v-model="searList.title" clearable style="width: 200px;"></el-input>
			<el-input placeholder="请输入商品条形码" v-model="searList.barcode" clearable style="width: 200px;"></el-input>
			<el-select v-model="searList.status" style="width: 200px" placeholder="请选择商品状态">
				<el-option v-for="(item,index) in goodsStatus" :key="index" :label="item.name" :value="item.value" />
			</el-select>
			<el-cascader :options="options" :props="{ checkStrictly: true }" v-model="parentTree" clearable
				placeholder="请选择类目" filterable @change="handleLink" />
			<el-button type="primary" icon="el-icon-search" style="margin-left: 5px;" @click='search()'>查找</el-button>
			<el-button type="primary" icon="el-icon-edit" @click='fixGoods()'>添加</el-button>
			<el-button type="danger" icon="el-icon-delete" :disabled="goodsIds.length === 0" @click='batchDelete()'>批量删除</el-button>
		</div>
		<!-- 表格数据 -->
		<el-table v-loading="loading" :data="goodsList" style="width: 100%" size="small" element-loading-text="正在查询中。。。"
			border fit highlight-current-row @selection-change="handleSelectionChange">
			<el-table-column align="center" type="selection" width="55" />
			<el-table-column align="center" label="sku信息" type="expand">
				<template slot-scope="props">
					<el-table size="small" :data="props.row.skuList" border fit highlight-current-row>
						<el-table-column align="center" label="商品条码" prop="barCode" />
						<el-table-column align="center" label="商品规格" prop="title" />
						<el-table-column align="center" label="商品库存" prop="stock" />
						<el-table-column align="center" label="商品冻结库存" prop="freezeStock" />
						<el-table-column align="center" label="原价" prop="originalPrice">
							<template slot-scope="scope">{{scope.row.originalPrice / 100}}</template>
						</el-table-column>
						<el-table-column align="center" label="现价" prop="price">
							<template slot-scope="scope">{{scope.row.price / 100}}</template>
						</el-table-column>
						<el-table-column align="center" label="VIP价格" prop="vipPrice">
							<template slot-scope="scope">{{scope.row.vipPrice / 100}}</template>
						</el-table-column>
					</el-table>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="id" label="商品ID" width="80" />
			<el-table-column align="center" prop="title" label="名称" width="100" />
			<el-table-column align="center" prop="img" label="图片" width="80">
				<template slot-scope="scope">
					<img :src="scope.row.img" width="50px" />
				</template>
			</el-table-column>
			<el-table-column align="center" prop="detail" label="详细介绍" width="80">
				<template slot-scope="scope">
					<el-dialog :visible.sync="detailDialogVisible" title="商品详情">
						<div class="detail" v-html="goodsDetail"></div>
					</el-dialog>
					<el-button type="primary" size="mini" @click='readDetail(scope.row)'>查看</el-button>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="categoryId" label="类目ID" width="80" />
			<el-table-column align="center" prop="freightTemplateId" label="邮费模板ID" width="80" />
			<el-table-column align="center" prop="sales" label="销量" width="80" />
			<el-table-column align="center" prop="unit" label="单位" width="80" />
			<el-table-column align="center" prop="status" label="是否在售" width="80">
				<template slot-scope="scope">
					<el-tag :type="scope.row.status === 0?'info':'success'">{{scope.row.status === 0?"未售":"在售"}}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="description" label="描述" width="300" />
			<el-table-column align="center" label="操作" width="300">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" @click="editGoods(scope.row)">编辑</el-button>
					<el-button :type="scope.row.status === 0?'warning':'success'" size="mini"
						@click='setGoodsStatus(scope.row)'>
						{{scope.row.status === 0?"下架":"上架"}}
					</el-button>
					<el-button type="danger" size="mini" @click='deleteGoods(scope.row)'>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-footer v-if="goodsList.length>0" class="border-top d-flex align-items-center px-0  bg-white"
			style="margin-top: 36px;">
			<div style="flex: 1;" class="px-2">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page.sync="searList.page" :page-sizes="[10, 20, 30, 50, 100]" :page-size="searList.limit"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</el-footer>
	</div>
</template>

<script>
	import {
		getCategoryTree,
		getGoodsList,
		deleteGoods,
		setGoodsStatus,
		getGoodsDetail,
		batchDeleteGoods
	} from "../api.js"
	export default {
		data() {
			return {
				// 商品状态
				goodsStatus: [{
					name: "下架",
					value: 0
				}, {
					name: "正常",
					value: 1
				}],
				// 搜索
				searList: {
					status: undefined,
					barcode: undefined,
					title: undefined,
					categoryId: undefined,
					page: 1,
					limit: 20,
				},
				parentTree: undefined,
				options: [],
				total: 1,
				goodsList: [],
				goodsForm: {},
				loading: false,
				detailDialogVisible: false,
				goodsDetail: '', //商品详情
				goodsIds: [], //批量删除的id
			}
		},
		methods: {
			// 获取数据
			getData() {
				this.loading = true;
				getGoodsList(this.searList).then((res) => {
					// console.log(res.data.data)
					this.goodsList = res.data.data.items;
					this.total = res.data.data.total;
					this.loading = false;
				})
			},
			// 获取类目树
			getCategorySpu() {
				getCategoryTree().then((res) => {
					this.options = this.getTreeData(res.data.data)
				})
			},
			handleSizeChange(val) { //每页条数
				this.searList.limit = val
				this.getData();
			},
			handleCurrentChange(val) { //前往第几页
				this.searList.page = val
				// console.log(val)
				this.getData()
			},
			handleLink(e) {
				if (e == null || e === undefined) {
					return false;
				}
				this.searList.categoryId = e[e.length - 1];
			},
			// 搜索
			search() {
				this.searList.page = 1;
				this.getData()
			},
			// 单个删除
			deleteGoods(value) {
				this.$confirm("此操作将永久删除该广告--" + value.title + "--, 是否继续?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					deleteGoods(value.id).then((res) => {
						console.log(res)
						this.$message.success("删除成功")
						let index = this.goodsList.indexOf(value)
						this.goodsList.splice(index, 1)
					})
				})
				.catch(() => {
					return false;
				});
			},
			// 改变商品状态
			setGoodsStatus(value) {
				let name = '';
				let status = 0;
				console.log(value.status);
				if (value.status === 1) {
					name = "上架"
					status = 0;
				} else if (value.status === 0) {
					name = "下架";
					status = 1;
				}
				this.$confirm("此操作将" + name + "--" + value.title + "--, 是否继续?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					setGoodsStatus(value.id, status).then((res) => {
						this.$message.success(name + "成功")
						console.log(res)
						this.getData()
					})
				})
			},
			// 查看
			readDetail(value) {
				this.detailDialogVisible = true;
				getGoodsDetail(value.id).then((res) => {
					this.goodsDetail = res.data.data.detail
					console.log(res.data)
				})
			},
			//选中的商品
			handleSelectionChange(val) {
				this.goodsIds = []
				val.forEach((item, index) => {
					this.goodsIds.push(item.id)
				})
			},
			// 批量删除
			batchDelete() {
				console.log(this.goodsIds)
				this.$confirm("此操作将永久删除选中的" +
					this.goodsIds.length +
					"件商品, 是否继续?",
					"提示" , {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					}).then(() => {
					batchDeleteGoods(this.goodsIds).then((res) => {
						console.log(res)
						if(res.data.errno === 200){
							this.$message.success("删除成功")
							this.getData()
						}
					})
				})
				.catch(() => {
					return false;
					this.getData()
				});
			},
			fixGoods(){
				this.$router.push({
					path: "/goods/upsert"
				});
			},
			editGoods(value){
				
				this.$router.push({
					path: "/goods/upsert",
					query: {
						id: value.id
					}
				});
				
			},
			// 递归
			getTreeData(data) {
				for (var i = 0; i < data.length; i++) {
					if ('children' in data[i]) {
						if (data[i].children.length < 1) {
							// children若为空数组，则将children设为undefined
							data[i].children = undefined;
						} else {
							// children若不为空数组，则继续 递归调用 本方法
							this.getTreeData(data[i].children);
						}
					}
				}
				return data;
			},
		},
		created() {
			this.getData();
			this.getCategorySpu();
		}
	}
</script>

<style scope>
	.good_container {
		width: 100%;
		height: 660px;
		overflow-x: auto;
		overflow-y: auto;
		padding: 20px;
	}

	.good_header>* {
		margin-left: 4px;
	}

	.good_header {
		padding-bottom: 10px;
	}

	/* .detail>>> img{
		max-width:100%;
		height:auto;
		line-height:0px
	} */
	.detail img {
		max-width: 100%;
		height: auto;
		line-height: 0px
	}
</style>
